<route>
{
  "alias": "/unbind"
}
</route>
<template>
  <div class="authorization" ref="card" v-loading="loading">
    <div class="authorization_top">
      <div class="authorization_top_header">
        <div class="container">
          <span class="title">{{ $t("sys.authorization_center") }}</span>
        </div>
      </div>
      <div class="authorization_top_appInfo tc">
        <span>
          {{ $t("sys.apply_name") }}：<span>{{ APP_INFO.appName }}</span>
        </span>
        <span class="ml60">
          {{ $t("sys.appUniqueId") }}：<span>{{ APP_INFO.appUniqueId }}</span>
        </span>
        <span class="ml60">
          授权状态：<span class="item-content"></span
          ><span style="color: #c01d02">已取消</span>
        </span>
        <span class="ml60">
          取消时间：<span>{{ getAuthCenterInfo.cancelDate | moment }}</span>
        </span>
      </div>
      <div class="authorization_top_content tc mb10">
        <el-skeleton :loading="!QRcodeUrl" animated>
          <template slot="template">
            <div
              style="display: flex; align-items: center; flex-direction: column"
            >
              <el-skeleton-item
                variant="image"
                style="width: 200px; height: 200px"
                class="mb20"
              />
              <el-skeleton-item
                variant="text"
                style="width: 100px; margin-top: 16px"
              />
            </div>
          </template>
          <template v-if="QRcodeUrl">
            <img :src="QRcodeUrl" width="140" height="140" />
            <div style="font-size: 12px; color: #69717c">
              小程序扫码解绑激活码
            </div>
            <el-button
              class="dymBtn"
              @click="unbind"
              type="primary"
              :loading="unbindLoading"
              >确认解绑</el-button
            >
          </template>
        </el-skeleton>
      </div>
    </div>
    <div>
      <div class="footer">
        <div class="footer_title">
          感谢您使用<span class="b">{{ APP_INFO.appName }}</span
          >系统
        </div>
        <div class="footer_info">1.试用版本可免费体验30天，无功能限制。</div>
        <div class="footer_info">
          2.如果您已经购买激活码，请完成授权激活后继续使用系统。
        </div>
        <div class="footer_info">3.如果您还未购买，可以联系我们购买。</div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getActivitedStatus,
  getRemoteUnbindInfo,
  confirmUnbind,
} from "@/customApi/license.js"
import { mapGetters } from "vuex"
import Upload from "./__components__/upload"
import QRCODE from "qrcode"

export default {
  layout: "formlayout",
  name: "unbind",
  components: { Upload },
  data() {
    return {
      loading: true,
      info: {},
      unbindLoading: false,
      QRcodeUrl: "",
    }
  },
  computed: {
    ...mapGetters(["APP_INFO", "MOS_ENABLED", "getAuthCenterInfo"]),
  },
  async created() {
    if (process.env.VUE_APP_ROOT_URL !== "./") {
      this.$router.push({ path: "/" })
    } else {
      if (!this.getAuthCenterInfo.isGetInfo) {
        this.$store.commit("SET_AuthCenterInfo", { isGetInfo: true })
        await this.$store.dispatch("GetLicenseInfoDto")
      }
      this.getStatus()
    }
  },
  methods: {
    // 获取授权文件删除状态
    getStatus() {
      getActivitedStatus().then((res) => {
        if (res === "NO_UNBIND") {
          if (this.MOS_ENABLED) {
            setTimeout(() => {
              window.location.replace(store.getters.MOS_DOMAIN)
            }, 500)
            return
          }
          this.loading = false
          this.info = res
          this.getQRcode()
        } else {
          this.$router.push({ path: "/" })
        }
      })
    },
    // 获取二维码
    async getQRcode() {
      let res = await getRemoteUnbindInfo()
      console.log(res)
      this.QRcodeUrl = await QRCODE.toDataURL(res, {
        margin: 2,
      })
    },
    // 解绑
    unbind() {
      this.$confirm("确定已完成扫码解绑", "提示", {
        type: "warning",
        center: true,
      }).then(async () => {
        await confirmUnbind()
        await this.$store.dispatch("GetLicenseInfoDto")
        this.$router.replace("/")
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.authorization {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  &_top {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    &_header {
      height: 56px;
      line-height: 56px;
      margin-bottom: 24px;
      .container {
        text-align: center;
        .title {
          font-size: 24px;
          font-weight: 600;
        }
      }
    }
    &_appInfo {
      margin: 24px 83px;
      background-color: rgba(237, 237, 237, 1);
      border-radius: 4px;
      line-height: 44px;
      border: 1px rgba(231, 231, 231, 1);
      .item-content {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #c01d02;
        margin-right: 5px;
        vertical-align: inherit;
        position: relative;
        top: -2px;
      }
    }
    &_content {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      .dymBtn {
        margin-top: 44px;
        width: 176px;
      }
    }
  }
  .footer {
    padding: 33px 130px 40px;
    background: #ebf3fe;
    border-radius: 4px;
    &_title {
      color: #69717c;
      margin-bottom: 22px;
      font-size: 12px;
    }
    &_info {
      font-size: 12px;
      color: #2b3648;
      line-height: 30px;
    }
  }
}
</style>
